<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改信息</title>
    <link href="/Public/css/animate.css" rel="stylesheet">
    <link rel="stylesheet" href="/Public/css/toast.css">
    <link rel="stylesheet" href="/Public/css/gxxjkefu-normalize.css">
    <link rel="stylesheet" href="/Public/css/model.css">
    <link rel="stylesheet" href="/Public/css/bootstrap.min.css">
    <link rel="stylesheet" href="/Public/css/pager.css">
    <link rel="stylesheet" href="/Public/css/bootstrap-grid.min.css">
    <link rel="stylesheet" href="/Public/css/style.css">
    <link rel="stylesheet" href="/Public/css/index2.css">
    <link rel="stylesheet" href="/Public/css/zoomify.min.css">

    <style>

        .modal-backdrop {
            position: relative;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1040;
            background-color: #000;
        }

        .notice_info {
            padding: 25px 2% 3%;
            color: #979797;
            float: left;
            width: 90%;
            background: #ffffff;
        }

        .input_info {
            display: flex;
            align-items: center;
            margin-bottom: 15px
        }

        .input_info input {
            padding: 5px 10px;
            width: 40%;
        }
        .input_info select {
            padding: 5px 10px;
            width: 40%;
        }

        .user_info_survey .title_div {
            display: inline-block;
            width: 15%;
            height: 100px;
            line-height: 100px;
            text-align: right;
            padding-right: 30px
        }

        .user_info_survey .title_div2 {
            width: 12%;
            height: 40px;
            line-height: 40px;
        }

        .urgency_ul li {
            color: #333333;
            margin-bottom: 10px;
        }

        .clearfloat:after {
            display: block;
            clear: both;
            content: "";
            visibility: hidden;
            height: 0
        }

        .clearfloat {
            background: white;
            zoom: 1
        }

        .pageJump input {
            width: 45px;
            height: 25px;
        }

        .btn_div {
            padding-left: 10%;
            margin-bottom: 2%;
        }

        .btn_div input {
            border-radius: 5px;
        }

        .common_btn {
            float: left;
            height: 30px;
            margin-right: 20px;
            border: solid 1px #ececec;
            color: #5d5e60;
            background: none;
        }

        .common_btn:hover {
            color: white;
            background: #abdde6;
            border: solid 1px #abdde6;
        }
        .recompense_btn{
            margin-left: 12%;
            background: #abdde6;
            color: white;
            border: solid 1px #abdde6;
        }
        /*上传*/
        .content{
            padding:0.5rem;
            display: flex;
            align-items: center;
            border-bottom: 1px #999 solid
        }
        .img-area{
            flex:1;
            padding: 30px 50px;
        }
        .container{
            background-color:#e7e7e7;
            position: relative;
            width: 40%;
            float: left;
        }
        .container div{
            text-align: center;
            padding:0.5rem 0
        }
        .container input{
            opacity:0;
            filter:alpha(opacity=0);
            height: 100%;
            width: 100%;
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 9;
        }
        .container p{
            font-size: 0.9rem;
            color:#999
        }
        body{
            font-size: 12px;
        }

    </style>
</head>
<body>
<!--<div class="scrollbar" id="style-1" style="overflow:scroll;overflow-x:hidden;margin: 0;width: 100%">-->
    <div id="main_C" style="width: 99%;" class="animated fadeInRight">
        <div class="clearfloat">
            <div class="title_info">
                <span>调查</span>
            </div>

            <div class="white_bgColor notice_info">
                <form class="user_info_survey">
                    <div style="display: flex;align-items: center">
                        <div class="title_div" style="width: 18%"><p>人脸照片</p></div>
                        <div class="row" style="display: inline-block">
                            <div class="example col-xs-1 col-md-1">
                                <p><img src="<{$user_pic.photo}>" class="img-rounded" width="100%" height="100%" /></p>
                            </div>
                            <div class="example col-xs-1 col-md-1">
                                <p><img src="<{$user_pic.photo1}>" class="img-rounded" width="100%" height="100%" /></p>
                            </div>
                            <div class="example col-xs-1 col-md-1">
                                <p><img src="<{$user_pic.photo2}>" class="img-rounded" width="100%" height="100%" /></p>
                            </div>
                        </div>
                    </div>


                    <div class="input_info">
                        <div class="title_div title_div2">
                            <p>用户姓名</p>
                        </div>
                        <input type="text" id="user_name" value="<{$user.truename}>"/>
                    </div>
                    <div class="input_info">
                        <div class="title_div title_div2">
                            <p>性别</p>
                        </div>
                        <select name="" id="select_sex">
                            <option value="">请选择</option>
                            <option value="1">男士</option>
                            <option value="2">女士</option>
                        </select>
                    </div>
                    <div class="input_info">
                        <div class="title_div title_div2">
                            <p>婚姻状况</p>
                        </div>
                        <select name="" id="select_marry">
                            <option value="请选择">请选择</option>
                            <option value="已婚">已婚</option>
                            <option value="未婚">未婚</option>
                            <option value="已婚已孕">已婚已孕</option>
                            <option value="已婚已育">已婚已育</option>
                            <option value="已婚未育">已婚未育</option>
                            <option value="已婚未孕">已婚未孕</option>
                            <option value="其他">其他</option>
                            <option value="离异">离异</option>
                        </select>
                    </div>

                    <div class="input_info">
                        <div class="title_div title_div2">
                            <p>学历</p>
                        </div>
                        <input type="text" id="degree" value="<{$user.degree}>"/>
                    </div>
                    <div class="input_info">
                        <div class="title_div title_div2">
                            <p>手机号码</p>
                        </div>
                        <input type="text" value="<{$user.u_mobile}>" readonly/>
                    </div>
                    <div style="display: flex;align-items: center">
                        <div class="title_div" style="width: 17%"><p>身份照片</p></div>
                        <div class="row" style="display: inline-block">
                            <div class="example col-xs-1 col-md-1">
                                <p><img src="<{$user_pic.front}>" class="img-rounded"  width="100%" height="100%"  /></p>
                            </div>
                            <div class="example col-xs-1 col-md-1">
                                <p><img src="<{$user_pic.behind}>" class="img-rounded"  width="100%" height="100%" /></p>
                            </div>
                            <div class="btn_div">
                                <input class="common_btn" type="button" data-toggle="modal"
                                       data-target=".bs-example-modal-sm2" value="修改"/>
                            </div>
                        </div>
                        <div class="modal fade bs-example-modal-sm2" id="myModal" style="background: none" tabindex="-1"
                             role="dialog" aria-labelledby="mySmallModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <form id="mainForm">
                                        <div class="content">
                                            <div class="img-area" id="img-id-card">
                                                <div class="container">
                                                    <input type="file" id='id-face' name='face'  accept="image/*" />
                                                    <div id='face-empty-result'>
                                                        <img style='width:4rem;margin:20px 0 10px' src="/Public/image/camera.png" alt="">
                                                        <p>身份证正面照</p>
                                                    </div>
                                                    <img style='width: 100%' id='face-result'/>
                                                </div>
                                                <div class="container" style="float: right">
                                                    <input type="file" id='id-back' name='back' accept="image/*" />
                                                    <div id='back-empty-result'>
                                                        <img style='width:4rem;margin:20px 0 10px' src="/Public/image/camera.png" alt="">
                                                        <p>身份证反面照</p>
                                                    </div>
                                                    <img style='width: 100%' id='back-result'/>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    <div style="position: relative">
                                        <input style="margin:20px 0 0 0;position: absolute;left: 18%;" id="edit-photo" type="button" value="确定修改正面"/>
                                        <input style="margin: 20px 0 0 67%;" id="edit-photo1" type="button" value="确定修改反面"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <form action=""  class="user_info_survey">
                    <div class="input_info">
                        <div class="title_div title_div2">
                            <p>身份证号码</p>
                        </div>
                        <input type="text" id="id_card" value="<{$user.id_card}>"/>
                    </div>
                    <div class="input_info">
                        <div class="title_div title_div2">
                            <p>身份证归属地</p>
                        </div>
                        <input type="text" value="<{$user.card_address}>" readonly/>
                    </div>
                    <div class="input_info">
                        <div class="title_div title_div2">
                            <p>居住地址</p>
                        </div>
                        <input type="text" id="live_address" value="<{$user.address}>"/>
                    </div>
                    <div class="input_info">
                        <div class="title_div title_div2">
                            <p>居住时长</p>
                        </div>
                        <input type="text" id="live_time" value="<{$user.residence_time}>"/>
                    </div>
                    <div class="input_info">
                        <div class="title_div title_div2">
                            <p><a href="javascript:;" onclick="show_work()">工作认证</a></p>
                        </div>
                        <input type="text" id="work_cert" value="<{$user.work_verify}>"/>
                    </div>
                    <input type="button" class="common_btn recompense_btn"   onclick="save_user()"  value="修改"/>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="/Public/js/pager.js"></script>
<script src="/Public/js/jquery-3.2.1.js"></script>
<script src="/Public/js/bootstrap.min.js"></script>
<script src="/Public/js/zoomify.min.js"></script>
<script src="/Public/js/toast.js"></script>
<script src="/Public/js/layer/layer.js"></script>
<script src="/Public/js/layui/layui.js"></script>
<script>

    var vid = "<{$vid}>";

    function show_work() {

        var    url='<{$SERVER_NAME}>/WorkCert/work_cert.html?vid='+vid;
        layer.open({
            title:'认证信息',
            type: 2,
            area: ['80%', '80%'],
            maxmin: true,
            offset:'100px',
            content: url,
            success: function(layero){
                layero.find('.layui-layer-min').remove();
            }
        });
    }


    console.log('9009090',vid);
    //保存修改信息
    function save_user() {
        var index = layer.load(1, {
            shade: [0.1, '#fff'] //0.1透明度的白色背景
        });
        var url = "<{$SERVER_NAME}>/User/user_save";
        var tourl = "";
        var user_name = $("#user_name").val();
        var select_sex = $("#select_sex").val();
        var select_marry = $("#select_marry").val();
        var degree = $("#degree").val();
        var id_card = $("#id_card").val();
        var live_address = $("#live_address").val();
        var live_time = $("#live_time").val();
//        var vid = "<{$user.vid}>";
        if (user_name == "" || select_sex == "" || select_marry == "" || degree == "" || id_card == "" || live_address == "" || live_time == "" ) {
            layer.close(index);
            $('#main_C').toast({
                content: '信息不完整！',
                duration: 1000
            });
            return false;
        }
        layer.alert('确定修改数据', {title: '提示框', icon: 3}, function (index) {
            $.post(url, {vid: vid, user_name: user_name, select_sex: select_sex, select_marry: select_marry, degree: degree, id_card: id_card, live_address: live_address, live_time: live_time}, function (data) {
                console.log('1111111',data);
                if (data.code == "1001") {
                    window.location.reload();
                    $('#main_C').toast({
                        content: '修改成功！',
                        duration: 1000
                    });
                }
                else {
                    layer.alert('修改失败', {title: '提示框', icon: 2});
                    layer.close(index);
                }
            });
            layer.close(index);
        });
        layer.close(index);
    }
    var sex = "<{$user.sex}>";
    $("#select_sex").val(sex);

    var marray = "<{$user.ismarry}>";
    $("#select_marry").val(marray);

    window.onload=function(){
        document.getElementById("id-face").addEventListener("change", function(){
            onFileChange(this,"face-result","face-empty-result")
        });
        document.getElementById("id-back").addEventListener("change", function(){
            onFileChange(this,"back-result","back-empty-result")
        });
        document.getElementById("edit-photo").addEventListener("click", function(){
            submit(1);//正面

        });
        document.getElementById("edit-photo1").addEventListener("click", function(){
            submit(2);
        });
    };
    /**
     * 选中图片时的处理
     * @param {*} fileObj input file元素
     * @param {*} el //选中后用于显示图片的元素ID
     * @param {*} btnel //未选中图片时显示的按钮区域ID
     */
    function onFileChange(fileObj,el,btnel){
        var windowURL = window.URL || window.webkitURL;
        var dataURL;
        var imgObj = document.getElementById(el);
        document.getElementById(btnel).style.display="none";
        imgObj.style.display="block";
        if (fileObj && fileObj.files && fileObj.files[0]) {
            dataURL = windowURL.createObjectURL(fileObj.files[0]);
            imgObj.src=dataURL;
        } else {
            dataURL = fileObj.value;
            imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
            imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
        }
    }
    /**
     * 将图片压缩后返回base64格式的数据
     * @param {*} image img元素
     * @param {*} width 压缩后图片宽度
     * @param {*} height 压缩后图片高度
     * @param {*} qua //图片质量1-100
     */
    function compressImageTobase64(image,width,height,qua){
        var quality = qua ? qua / 100 : 0.8;
        var canvas = document.createElement("canvas"),
            ctx = canvas.getContext('2d');
        var w = image.naturalWidth,
            h = image.naturalHeight;
        canvas.width = width||w;
        canvas.height = height||h;
        ctx.drawImage(image, 0, 0, w, h, 0, 0, width||w, height||h);
        var data = canvas.toDataURL("image/jpeg", quality);
        return data;
    }
    //提交
    function submit(type){

        var index = layer.load(1, {
            shade: [0.1, '#fff'] //0.1透明度的白色背景
        });

        //1、form提交
        //document.getElementById("mainForm").submit();
        //2、压缩后ajax提交

        var formData = new FormData();
        if(type==1){
            var face_data=compressImageTobase64(document.getElementById("face-result"),600,420,100);
        }
        if(type==2){
            var face_data=compressImageTobase64(document.getElementById("back-result"),600,420,100);
        }
        formData.append("face_base",face_data);
        formData.append("type",type);
        formData.append("vid",vid);
        //需引入jQuery
        layer.alert('确定修改数据', {title: '提示框', icon: 3}, function (index) {
            $.ajax({
                url:"<{$SERVER_NAME}>/User/change_base64_img",
                type: 'POST',
                cache: false,
                data: formData,
                timeout:180000,
                processData: false,
                contentType: false,
                success:function(r){
                    if(r.code='1001'){
                        $('#img-id-card').toast({
                            content: '修改成功！',
                            duration: 1000
                        });
                        window.location.reload();

                    }else {
                        $('#img-id-card').toast({
                            content: '修改失败！',
                            duration: 1000
                        });
                    }
                },
                error:function(r){
                    console.log('12121',r);
                }
            });

            layer.close(index);
        })
        layer.close(index);

    }
</script>
<script>
    /*分页*/
//    Page({
//        num: 20,					//页码数
//        startnum: 1,				//指定页码
//        elem: $('#page2'),		//指定的元素
//        callback: function (n) {	//回调函数
//            console.log(n);
//        }
//    });

    $('.example img').zoomify();

//    $('#myModal').modal(options);
</script>
</body>
</html>